•

:

NaN / NaN
Back
EG
Skip navigation
Create
Notifications
Shopping cart
EG

Beautiful Router Animations with Angular
Suggested: Angular Router - The Basics and Beyond
If playback doesn't begin shortly, try restarting your device.
5 seconds
Miniplayer (i)
You're signed out
Videos you watch may be added to the TV's watch history and influence TV recommendations. To avoid this, cancel and sign in to YouTube on your computer.
optional here because some of thesequeries will want
Up next
Live
Upcoming
Play Now
Cypress in 100 Seconds
2:31
10 Programmer Stereotypes
5:08
Pro
angularfirebase.com
Learn more
Fireship
SUBSCRIBE
SUBSCRIBED
Switch camera
Share
An error occurred while retrieving sharing information. Please try again later.
From Fireship
11:47

Angular Router - The Basics and Beyond

  • by Fireship
  • 88,668 views
0:00
10:00
5:48 / 10:00•Watch full video

Beautiful Router Animations with Angular

111,247 views Feb 11, 2019 Create beautiful 🎨 page transitions with the Angular Router by building four different animation sequences from scratch https://fireship.io/lessons/angul…...more
...more
Show less
1.7K
I like this
Dislike
I dislike this
Share
Download
Clip
Clip
Save
Fireship
Fireship
Verified
1.33M subscribers
Subscribe
Comments
112
Islam Elsayed
Add a comment...

Beautiful Router Animations with Angular

111,247 views111K views
Feb 11, 2019
1.7K
Dislike
Share
Download
Clip
Save
Fireship
Fireship
Verified
1.33M subscribers
Subscribe
Create beautiful 🎨 page transitions with the Angular Router by building four different animation sequences from scratch https://fireship.io/lessons/angular-r... - Deal Crunch App https://play.google.com/store/apps/de... - Angular Router https://angular.io/guide/router - Angular Animations https://angular.io/guide/animations
Show less ...more

112 Comments

Sort comments
Sort by
Top comments
Newest first
Islam Elsayed
Add a comment...
Islam Elsayed
 
0/
Cancel Comment
Islam Elsayed

Islam Elsayed

0 seconds ago
Hello, why this error console (.Unable to process animations - returned zero elements ) !?
Show less Read more
0
0
Reply
Damian Boryga

Damian Boryga

1 year ago
I love that i don't have to spent 30mins on watching tutorial about how to install angular cli and all the basics when i just need what i'm searching for. Thank you <3
Show less Read more
9
9
Reply
CodingCatDev

CodingCatDev

3 years ago (edited)
Beautiful job as always Jeff! I was just working on page flips for the same. Are there any suggestions on when to do animation work using CSS directly vs using Angular Animations?
Show less Read more
0
0
Reply
View 3 replies from Fireship and others
Hide 3 replies
Reynaldo Columna

Reynaldo Columna

3 years ago
I needed this tutorial so bad, man! Came right in the nick of time too :)
Show less Read more
12
12
❤ by Fireship
Reply
View reply from Fireship
Hide reply
ANUJ GROVER

ANUJ GROVER

3 years ago (edited)
Thank you for all such creative tutorials 🧡
Show less Read more
0
0
❤ by Fireship
Reply
View reply from Fireship
Hide reply
Mateus Carniatto

Mateus Carniatto

3 years ago
Awesome video!! Could this also be used with lazy loaded routes?
Show less Read more
2
2
❤ by Fireship
Reply
View reply from Fireship
Hide reply
Oleh Kopyl

Oleh Kopyl

1 month ago (edited)
Thanks a lot for a great video. But the problem with this approach is that when you open a route for the first time, it slides from left or right, but what if I want it to slide only when I switch manually and not when I open them from the first time from URL? Basically, I need to cancel the animation if a user comes from the same route or just opened the route for the first time.
Show less Read more
0
0
Reply
Narendra Singh Rathore

Narendra Singh Rathore

3 years ago (edited)
Great video on animations. Waiting something on dynamic components, ng-content, ng-container, content management in angular,( for.eg angular.io ) some advance angular concepts.
Show less Read more
1
1
Reply
T L

T L

6 months ago
Thanks for saving my class project by the due day. You are such a brilliant guy.
Show less Read more
0
0
Reply

kamlesh merugu

3 years ago
Way to go, looking forward for some more awesome videos
Show less Read more
0
0
Reply

Mark Statkus

1 year ago
I tested this out.. chrome fairly smooth, other browsers 1 to 2 FPS. I wish there was a easier way to do this using GSAP or just straight CSS.
Show less Read more
0
0
Reply

Son Of Troy

3 years ago
This is awesome! What can I do to get the deep understanding of code the way you do
Show less Read more
0
0
Reply
View reply from Fireship
Hide reply

B

3 years ago
Route animations behave very weird if your pages have scrollbars. Also on Firefox Mobile cause tearing and rendering problems
Show less Read more
1
1
Reply

Juan Mario Valderrama

2 years ago
When I use AOT in "ng build --aot=true", it shows an error: "Functions expressions are not supported in decorators in x references x. Consider changing the function expression into an exported function". But, when I change it to "export function", it shows the same error. Some ideas?
Show less Read more
4
4
Reply
View 2 replies
Hide 2 replies

MrPorridge

3 years ago
Hi Jeff, I've followed your tutorial and the animations work great when using ng serve, but when I try to ng build --prod, I get this error: ERROR in src\app\recipe-builder\recipe-builder.component.ts(9,16): Error during template compile of 'RecipeBuilderComponent' Reference to a non-exported function in 'slider' 'slider' contains the error at src\app\recipe-builder\route-animations.ts(37,10) Any idea why this might be the case for building to production? Thanks
Show less Read more
0
0
Reply
View 4 replies
Hide 4 replies

Lars Rye Jeppesen

2 years ago
ERROR in app/main/containers/app/app.component.ts(32,5): Error during template compile of 'AppComponent' Reference to a non-exported function in 'slider' 'slider' contains the error at app/main/containers/app/route-animations.ts(20,10).
Show less Read more
2
2
Reply

yassine khe

2 years ago
thanks for the tuto but How I can use the same animation only between some components and not all of the application?
Show less Read more
2
2
Reply

Shy Agam

3 years ago (edited)
This doesn't seem to compile when building with ng build --prod . The AOT compiler doesn't like the [direction] key specification. A workaround is to create a function that returns the direction object: export function dir(direction: 'left' | 'right', value: number | string ) { return direction === 'left' ? { left: value } : { right: value }; } Then call it like so: style(dir(direction, 0)) . Now it's possible to keep using the same animation function without duplicating it for each direction. ( ! ) Notice the export keyword as the AOT compiler requires it.
Show less Read more
2
2
Reply
View 2 replies
Hide 2 replies

Jose Gonzalez

2 years ago
I get this error but the animations still work. ``` core.js:15713 ERROR Error: Unable to process animations due to the following failed trigger transitions @routeAnimations has failed due to: - `query(":enter, :leave")` returned zero elements. (Use `query(":enter, :leave", { optional: true })` if you wish to allow this.) - `query(":enter")` returned zero elements. (Use `query(":enter", { optional: true })` if you wish to allow this.) - `query(":leave")` returned zero elements. (Use `query(":leave", { optional: true })` if you wish to allow this.) ```
Show less Read more
13
13
Reply
View 2 replies
Hide 2 replies

Jeremy Sistrunk

1 year ago
How do you ensure smooth animations using resolveGuard?
Show less Read more
0
0
Reply

Juan Cruz

1 year ago
Hi, how can i add this transitions/animations to another routing ? I havnt got all the components in AppRoutingModule. Thanks!
Show less Read more
0
0
Reply

Create clip

Islam Elsayed
Public
 
 
0/140
–
30.0 seconds
Cancel
Share Clip
Continue clipping after ad finishes
Can’t create clip while ad is playing

Description

Create beautiful 🎨 page transitions with the Angular Router by building four different animation sequences from scratch https://fireship.io/lessons/angular-r... - Deal Crunch App https://play.google.com/store/apps/de... - Angular Router https://angular.io/guide/router - Angular Animations https://angular.io/guide/animations
Show less Show more

Comments 112

Top comments
Newest first

Islam Elsayed

0 seconds ago
Hello, why this error console (.Unable to process animations - returned zero elements ) !?
Show less Read more
0
0
Reply

Transcript

:

NaN / NaN
All Angular CSS Related Watched
39:52 Now playing

Optimizing an Angular application - Minko Gechev

ng-conf
ng-conf
•
58K views 4 years ago
5:35 Now playing

ازاي تتصرف لو الكاوتش فرقع !

Yasser Yehia _ ياسر يحيى
Yasser Yehia _ ياسر يحيى
Verified
•
496 views 38 minutes ago
New
11:47 Now playing

Angular Router - The Basics and Beyond

Fireship
Fireship
Verified
•
88K views 3 years ago
48:11 Now playing

اخطاء المبتدئين في قيادة السيارات المانيوال

Yasser Yehia _ ياسر يحيى
Yasser Yehia _ ياسر يحيى
Verified
•
17K views 1 month ago
6:35 Now playing

Write Your First WASM Module using Rust

Austin Crim
Austin Crim
•
8.4K views 3 months ago
19:57 Now playing

08 تعليم الرجوع للخلف | أخطاء المبتدئين

Yasser Yehia _ ياسر يحيى
Yasser Yehia _ ياسر يحيى
Verified
•
62K views 2 months ago
7:30 Now playing

ازاي اقضي علي الخوف و الرهبه واقدر اطلع بالعربيه لوحدى ؟

Yasser Yehia _ ياسر يحيى
Yasser Yehia _ ياسر يحيى
Verified
•
18K views 3 days ago
New
17:07 Now playing

البرمجة : الخوارزميات والفرق بينها وبين لغات البرمجة

ZAmericanEnglish
ZAmericanEnglish
Verified
•
1.2M views 2 years ago
3:04 Now playing

موسيقى عرفات - جزيرة غمام

AquaMusic
AquaMusic
•
19K views 3 weeks ago
14:53 Now playing

What is JWT authorization really about - Java Brains

Java Brains
Java Brains
Verified
•
814K views 2 years ago
42:22 Now playing

I've been challenged to a CSS Battle rematch | Can I beat him again???

Kevin Powell
Kevin Powell
Verified
•
711K views 1 year ago
25:22 Now playing

07 تعليم قيادة السيارات الاوتوماتيك | اخطاء المبتدئين

Yasser Yehia _ ياسر يحيى
Yasser Yehia _ ياسر يحيى
Verified
•
17K views 2 months ago
15:49 Now playing

كيف تصبح غنياً💰؟ دون الاعتماد على الحظ!

دروس أونلاين
دروس أونلاين
Verified
•
489K views 5 months ago
11:11 Now playing

تعلم البرمجة مجانا من اليوتيوب بالطريقة الصحيحة

Codezilla
Codezilla
Verified
•
211K views 4 months ago
20:25 Now playing

05 تعليم قيادة السيارات الأوتوماتيك | أخطاء المبتدئين

Yasser Yehia _ ياسر يحيى
Yasser Yehia _ ياسر يحيى
Verified
•
324K views 2 months ago
1:13:09 Now playing

Part 6: Route Transitions | Angular - Build a Personal Dashboard App

Devstackr
Devstackr
•
3K views 1 year ago
12:29 Now playing

Hierarchical Routing Animations in Angular

Digital Fluency
Digital Fluency
•
38K views 4 years ago
3:51 Now playing

تتر مسلسل جزيرة غمام ( مع الكلمات ) - علي الحجار

Ali Elhaggar
Ali Elhaggar
Official Artist Channel
•
124K views 1 month ago
20:39 Now playing

03 تعليم قيادة السيارات الأوتوماتيك | أخطاء المبتدئين

Yasser Yehia _ ياسر يحيى
Yasser Yehia _ ياسر يحيى
Verified
•
75K views 3 months ago
31:37 Now playing

Angular 12 2021 | Routing | LazyLoading | AuthGuard | multiple router-outlet | all in one video

Technical Babaji
Technical Babaji
•
55K views 9 months ago
Show more